<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图形3D开发</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="apple-touch-icon" href="/blog/apple-touch-icon.png">
    <link rel="icon" href="/blog/favicon.ico">
    <link rel="manifest" href="/blog/manifest.json">
    <link rel="mask-icon" href="/blog/icons/icon.svg" color="#ffffff">
    <meta name="description" content="可能是全网最给力的前端博客">
    <meta name="theme-color" content="#ffffff">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
    <link rel="preload" href="/blog/assets/css/0.styles.3f022aa2.css" as="style"><link rel="preload" href="/blog/assets/js/app.7fa07907.js" as="script"><link rel="preload" href="/blog/assets/js/2.b6c629b5.js" as="script"><link rel="preload" href="/blog/assets/js/21.e705be23.js" as="script"><link rel="preload" href="/blog/assets/js/3.589a64d8.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.8e59817e.js"><link rel="prefetch" href="/blog/assets/js/11.34cd2f44.js"><link rel="prefetch" href="/blog/assets/js/12.445d88fd.js"><link rel="prefetch" href="/blog/assets/js/13.e6460b96.js"><link rel="prefetch" href="/blog/assets/js/14.d0ee0fcf.js"><link rel="prefetch" href="/blog/assets/js/15.e91e78ed.js"><link rel="prefetch" href="/blog/assets/js/16.8310de97.js"><link rel="prefetch" href="/blog/assets/js/17.6ca97902.js"><link rel="prefetch" href="/blog/assets/js/18.a82e534b.js"><link rel="prefetch" href="/blog/assets/js/19.e3a914ee.js"><link rel="prefetch" href="/blog/assets/js/20.6db77b80.js"><link rel="prefetch" href="/blog/assets/js/22.efc39414.js"><link rel="prefetch" href="/blog/assets/js/23.5f4c7658.js"><link rel="prefetch" href="/blog/assets/js/24.359a62e4.js"><link rel="prefetch" href="/blog/assets/js/25.c49ef7a9.js"><link rel="prefetch" href="/blog/assets/js/26.8d45691f.js"><link rel="prefetch" href="/blog/assets/js/27.364b1802.js"><link rel="prefetch" href="/blog/assets/js/28.485228c0.js"><link rel="prefetch" href="/blog/assets/js/29.0ee8fc42.js"><link rel="prefetch" href="/blog/assets/js/30.465920a7.js"><link rel="prefetch" href="/blog/assets/js/4.1dbf8b08.js"><link rel="prefetch" href="/blog/assets/js/5.9253897f.js"><link rel="prefetch" href="/blog/assets/js/6.4c1f13e3.js"><link rel="prefetch" href="/blog/assets/js/7.bc1839d0.js"><link rel="prefetch" href="/blog/assets/js/8.611f5ec5.js"><link rel="prefetch" href="/blog/assets/js/9.5813bb74.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3f022aa2.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/app.png" alt="卢本伟广场" class="logo"> <span class="site-name can-hide">卢本伟广场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/dsm/" class="nav-link router-link-active">
  歪比歪比
</a></div><div class="nav-item"><a href="/blog/lbw/" class="nav-link">
  歪比吧卜
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/dsm/" class="nav-link router-link-active">
  歪比歪比
</a></div><div class="nav-item"><a href="/blog/lbw/" class="nav-link">
  歪比吧卜
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/blog/dsm/" aria-current="page" class="sidebar-link">前端自我修养</a></li><li><a href="/blog/dsm/algorithm.html" class="sidebar-link">前端面试算法</a></li><li><a href="/blog/dsm/jsbook.html" class="sidebar-link">JS高级程序设计</a></li><li><a href="/blog/dsm/cc150.html" class="sidebar-link">程序员面试金典</a></li><li><a href="/blog/dsm/pattern.html" class="sidebar-link">前端设计模式</a></li><li><a href="/blog/dsm/architecture.html" class="sidebar-link">前端工程架构</a></li><li><a href="/blog/dsm/protocol.html" class="sidebar-link">计算机网络</a></li><li><a href="/blog/dsm/node.html" class="sidebar-link">服务端开发</a></li><li><a href="/blog/dsm/webgl.html" aria-current="page" class="active sidebar-link">图形3D开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#计算机图形学" class="sidebar-link">计算机图形学</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#三维图形程序架构" class="sidebar-link">三维图形程序架构</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#gpu渲染管线" class="sidebar-link">GPU渲染管线</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#向量" class="sidebar-link">向量</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#齐次坐标" class="sidebar-link">齐次坐标</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#点乘" class="sidebar-link">点乘</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#叉乘" class="sidebar-link">叉乘</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#矩阵" class="sidebar-link">矩阵</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#_2d模型变换矩阵" class="sidebar-link">2D模型变换矩阵</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#视图变换矩阵" class="sidebar-link">视图变换矩阵</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#投影变换矩阵" class="sidebar-link">投影变换矩阵</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#光栅化" class="sidebar-link">光栅化</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#webgl概述" class="sidebar-link">WebGL概述</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#three-js概述" class="sidebar-link">Three.js概述</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#three-js程序结构" class="sidebar-link">Three.js程序结构</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/webgl.html#three-js常用方法" class="sidebar-link">Three.js常用方法</a></li></ul></li><li><a href="/blog/dsm/lodash.html" class="sidebar-link">jQuery / Lodash</a></li><li><a href="/blog/dsm/finger.html" class="sidebar-link">AlloyFinger</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="互动3d开发"><a href="#互动3d开发" class="header-anchor">#</a> 互动3D开发</h1> <img id="topImg" src="/blog/images/IMG_9025.jpeg"> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>目前大前端的方向大致有：网页、小程序、H5游戏、移动端、客户端、服务端、图形3D、AR/VR、音视频、人工智能、区块链等等。</p> <p>随着5G的到来，所有的网页或者程序都会趋于图形化，游戏化，3D化，强交互的特性已经是一个产品必不可少的需求，前端工程师从此变成人机交互体验设计师，因此前端的图形3D未来将会是个热门方向。</p> <h2 id="计算机图形学"><a href="#计算机图形学" class="header-anchor">#</a> 计算机图形学</h2> <p>计算机图形学是研究怎样利用计算机来显示、生成和处理图形的原理、方法和技术的一门学科。</p> <p><strong>计算机图形学经历了三个历史阶段：</strong></p> <ul><li>建立学科阶段（50年代）
<ul><li>电子数字积分计算机</li> <li>阴极射线管</li> <li>半自动防空系统+光笔</li> <li>MIT论文首次提出计算机图形学</li></ul></li> <li>光栅图形学阶段（70年代）
<ul><li>光栅扫描图形显示器</li> <li>第一届SIGGRAPH计算机图形学交互技术学术会议</li> <li>各种图形软件标准+图形系统</li> <li>各种图形渲染技术</li></ul></li> <li>真实感图形学阶段（90年代）
<ul><li>工业化图形学标准OpenGL和DirectX</li> <li>GPU图形处理器</li> <li>建模更逼真、光线追踪算法、细节贴图、硬件提升</li> <li>多元化+学科交叉</li></ul></li></ul> <p><strong>图形学应用领域</strong></p> <ul><li>计算机辅助设计</li> <li>虚拟现实环境</li> <li>科学计算可视化</li> <li>影片</li> <li>游戏</li></ul> <p><strong>图形学研究方向</strong></p> <ul><li>造型技术</li> <li>动作表情捕捉技术</li> <li>真实感渲染技术</li> <li>管线优化技术</li> <li>图形学与深度学习技术</li></ul> <h2 id="三维图形程序架构"><a href="#三维图形程序架构" class="header-anchor">#</a> 三维图形程序架构</h2> <ul><li>应用程序（CPU+着色器代码）</li> <li>显卡驱动（OpenGL驱动或者DirectX驱动）</li> <li>图形处理器（GPU）</li> <li>帧缓冲存储器（帧缓存）</li> <li>输入设备
<ul><li>穿孔纸</li> <li>光笔</li> <li>鼠标</li> <li>触摸屏</li> <li>数据手套</li> <li>数据衣</li> <li>力反馈器</li></ul></li> <li>显示设备
<ul><li>CRT显示器</li> <li>平板显示器</li> <li>液晶显示器</li> <li>等离子体显示器</li> <li>LED显示器</li> <li>三维立体眼镜</li> <li>头盔显示器</li> <li>眼镜盒子</li> <li>裸眼立体显示器</li> <li>气体投影</li></ul></li> <li>输出设备
<ul><li>打印机</li> <li>绘图仪</li></ul></li></ul> <h2 id="gpu渲染管线"><a href="#gpu渲染管线" class="header-anchor">#</a> GPU渲染管线</h2> <p>渲染管线就是在给定虚拟相机、三维物体、光源、照明模式、纹理等等条件下，GPU生成一副二维图像的过程。</p> <p>图形渲染管线分为三个阶段，第一个阶段由CPU完成，后两个阶段由GPU完成：</p> <ul><li>应用阶段：将绘制几何体所需的顶点、光照、摄像机位置、纹理数据参数输入到绘制管线的下一个阶段</li> <li>几何阶段：将数据放入三维坐标系中，经过计算、透视角度变换、裁剪、光照着色映射到二维屏幕坐标系中，将各个数据输入到光栅化阶段
<ul><li><strong>顶点着色器（可编程阶段）</strong>：模型变换、视图变换、顶点着色</li> <li><strong>几何着色器、曲面细分着色器（可选编程阶段）</strong>：顶点增删、曲面细分</li> <li>裁剪（可配置阶段）：投影变换、裁剪</li> <li>屏幕映射（固定）</li></ul></li> <li>光栅化阶段：根据变换投影过后的顶点、颜色、纹理坐标等数据，得到输出到屏幕每个像素的正确配色，输入到显存，最后打印到屏幕
<ul><li>三角形设置（固定）：顶点转换成三角形网格</li> <li>三角形遍历（固定）：网格转换成像素点</li> <li><strong>片元着色器（可编程阶段）</strong>：计算每一个片元的颜色值</li> <li>逐片元操作（可配置阶段）：通过融合计算出每一个像素点的颜色值</li></ul></li></ul> <h2 id="向量"><a href="#向量" class="header-anchor">#</a> 向量</h2> <p>向量是既有大小（长度）又有方向的量</p> <p>向量表达形式：A = [[ x ],[ y ]] = (x,y)</p> <p>单位向量（长度为1的向量）= 向量 / 向量长度，往往用来表示方向</p> <p>几何意义中的加减法：三角形法则</p> <p>代数意义中的加减法：坐标相加减</p> <h2 id="齐次坐标"><a href="#齐次坐标" class="header-anchor">#</a> 齐次坐标</h2> <p>齐次坐标是投影几何中的坐标系统</p> <p>齐次坐标将原笛卡尔n维坐标扩展成n+1维坐标，如果是向量新添坐标为0，如果是坐标新添坐标为1</p> <p>使用齐次坐标的好处：</p> <ul><li>区分坐标和位移向量</li> <li>使变换方程能以单个变换矩阵形式表达</li> <li>表示透视空间中无穷远的点</li></ul> <p>在齐次坐标中：</p> <ul><li>位置 - 位置 = 位移</li> <li>位置 + 位移 = 位置</li> <li>位移 + 位移 = 位移</li> <li>位置 + 位置 = 中点</li></ul> <h2 id="点乘"><a href="#点乘" class="header-anchor">#</a> 点乘</h2> <p>几何意义中的点乘：a * b =  向量a的长度 * 向量b的长度 * 两向量夹角余弦</p> <p>代数意义中的点乘：a * b = (Xa,Ya,Za)<em>(Xb,Yb,Zb) = [[ Xa, Ya, Za]]</em>(Xb,Yb,Zb)=Xa<em>Xb+Ya</em>Yb+Za*Zb</p> <p>点乘作用：</p> <ul><li>找到两个向量的夹角</li> <li>判断两向量的方向性（同向、相反、垂直）</li> <li>求出一个向量到另一个向量的投影</li> <li>解构其中一个向量</li></ul> <h2 id="叉乘"><a href="#叉乘" class="header-anchor">#</a> 叉乘</h2> <p>两向量的叉乘生成一个新向量，方向垂直于两向量的平面：a x b = -b x a</p> <p>几何意义中的叉乘：||a x b|| = 向量a的长度 * 向量b的长度 * 两向量夹角正弦</p> <p>代数意义中的叉乘：a x b = (YaZb-YbZa,ZaXb-XaZb,XaYb-YaXb) = [[0, -Za, Ya], [Za, 0, -Xa],[-Ya, Xa, 0]]*(Xb,Yb,Zb)</p> <p>叉乘作用：</p> <ul><li>判断两个向量的左右性</li> <li>判断点是否在三角形内</li></ul> <h2 id="矩阵"><a href="#矩阵" class="header-anchor">#</a> 矩阵</h2> <p>矩阵的乘积：（M x N）（N x P）=（M x P）</p> <p>[[1, 3],[5, 2],[0, 4]] * [[3, 6, 9, 4],[2, 7, 8, 3]]
= [[9, 27, 33, 13],[19, 44, 61, 26],[8, 28, 32, 12]]</p> <p>矩阵的转置：(AB)^T = B^T*A^T</p> <p>[[1, 2], [3, 4], [5, 6]]^T = [[1, 3, 5], [2, 4, 6]]</p> <p>逆矩阵：AA^(-1) = A^(-1)A = I</p> <p>(AB)^(-1) = B^(-1)A^(-1)</p> <p>R^(-1) = R^T</p> <p><strong>将三维空间中的物体变成一张二维图像，要经历模型(Model)变换、视图(View)变换、投影(Projection)变换</strong></p> <h2 id="_2d模型变换矩阵"><a href="#_2d模型变换矩阵" class="header-anchor">#</a> 2D模型变换矩阵</h2> <p>平移矩阵：[[1, 0, tx],[0, 1, ty],[0, 0, 1]]</p> <p>缩放矩阵：[[sx, 0, 0],[0, sy, 0],[0, 0, 1]]</p> <p>剪切矩阵：[[1, shx, 0],[shy, 1, 0],[0, 0, 1]]</p> <p>旋转矩阵：[[cos(theta), -sin(theta), 0], [sin(theta), cos(theta), 0],[0, 0, 1]]</p> <p>仿射矩阵：[[a1, a2, tx],[a3, a4, ty],[0, 0, 1]]</p> <h2 id="视图变换矩阵"><a href="#视图变换矩阵" class="header-anchor">#</a> 视图变换矩阵</h2> <p>Tview = [[1,0,0,-Xe],[0,1,0,-Ye],[0,0,1,-Ze],[0,0,0,1]]</p> <p>Rview = [[Xgxt,Ygxt,Zgxt,0],[Xt,Yt,Zt,0],[X-g,Y-g,Z-g,0],[0,0,0,1]]</p> <p>Mview = Rview * Tview</p> <h2 id="投影变换矩阵"><a href="#投影变换矩阵" class="header-anchor">#</a> 投影变换矩阵</h2> <p>Scale = [[2/(r-l),0,0,0],[0,2/(t-b),0,0],[0,0,2/(n-f),0],[0,0,0,1]]</p> <p>Center = [[1,0,0,-(r+l)/2],[0,1,0,-(t+b)/2],[0,0,1,-(n+f)/2],[0,0,0,1]]</p> <p>正交投影矩阵：Mortho = Scale * Center</p> <p>Mpersp-ortho = [[n,0,0,0],[0,n,0,0],[0,0,n+f,-nf],[0,0,1,0]]</p> <p>透视投影矩阵：Mpersp = Mortho * Mpersp-ortho</p> <p><strong>用 Mpersp-ortho 将锥体（frustum）挤压成长方体（cuboid）时，near和far的上任何点的z值不变，而对于near和far中间的任意点的z值在挤压时是会被挤向near还是挤向far还是不变？</strong></p> <p>[x',y',z',1] = [x,y,z,1] * Mpersp-ortho = [nx,ny,(n+f)z-nf,z] = [nx/z,ny/z,n+f-nf/z,1]</p> <p>z' = n+f-nf/z &lt; z (z &lt; 0), 所以锥体中的任意点在挤压时会被压向far</p> <h2 id="光栅化"><a href="#光栅化" class="header-anchor">#</a> 光栅化</h2> <p>视口变换矩阵：Mviewport = [[width/2,0,0,width/2],[0,height/2,0,height/2],[0,0,1,0],[0,0,0,1]]</p> <p>通过采样判断像素点中心是否在图形里，计算出图形所包含的像素点</p> <p>for (let x = 0 ; x &lt; width ; x++)
for (let y = 0 ; y &lt; height ; y++)
image[x][y] = inside(tri, x+0.5, y+0.5)</p> <h2 id="webgl概述"><a href="#webgl概述" class="header-anchor">#</a> WebGL概述</h2> <p>OpenGL架构委员会（OpenGL Architecture Review Board）制定了一种具备<strong>可移植性的2D/3D图形规范</strong>叫OpenGL，该规范定义了用来操作图形和图片必须要有的函数API，使程序员不用直接跟GPU打交道，而是跟抽象出来的通用接口打交道，OpenGL规范定义的API内部实现由各个GPU厂商像AMD、Intel、Nvidia做的显卡驱动来实现并翻译成GPU指令来运行三维图形软件，除了OpenGL这一套API规范以外，还有其他图形API规范，比如Direct3D、Vulkan、Metal等等。OpenGL规范在与微软的Dirct3D规范激烈竞争中一度落后，之后被Khronos Group管理的精简OpenGL ES取代，发展迅猛。</p> <p>GPU绘制图形的各方面能力都比CPU强，其中着色器Shader是运行在GPU上的程序，主要来处理和渲染图形，自定义渲染图形时的动画效果，CPU中OpenGL程序里编写的着色器代码通过接口传给GPU中的着色器并执行，编写着色器代码也就意味着<strong>面向GPU编程</strong>，这也是客户端游戏开发的方式，着色器语言目前有基于OpenGL的GLSL ES（OpenGL Shading Language ES），基于Direct3D 的HLSL（High Level Shading Language），还有NVIDIA 公司的Cg（C for Graphic）语言等等。</p> <p>WebGL是一套基于OpenGL ES规范封装的面向GPU编程的3D绘图DOM API，或者说是<strong>OpenGL浏览器端运行环境</strong>，需要大量地配合色器语言GLSL ES（OpenGL Shading Language ES）在底层调用驱动上实现好的OpenGL绘图方法来控制GPU绘制图形，同时还依赖于H5的Canvas元素，用JS拿到从Canvas元素返回的WebGL3D绘图上下文对象才能调用WebGL绘图函数并配合着色器语言GLSL来绘图。</p> <p>Canvas是H5新增的画布元素，可以通过Canvas选择的渲染上下文暴露的API直接在画布上绘图，渲染上下文主要有基于CanvasRenderingContext2D的2D上下文，也有基于WebGL的3D上下文，也有基于WebGL2的3D上下文。</p> <p><strong>Canvas2D固定渲染管线</strong>不需要也不允许自定义顶点渲染和像素渲染的具体逻辑，它内部已经固化了一套完整的渲染流程，只需要开发者在CPU代码端输入渲染所需要的参数并指定特定的开关，就能完成不同的渲染；<strong>WebGL3D可编程渲染管线</strong>使得开发者可以根据自己的具体需要来编写顶点渲染和像素渲染中的具体逻辑，可最大程度的简化渲染管线的逻辑以提高渲染效率，也可自己实现特定的算法和逻辑来渲染出固定管线无法渲染的效果，具有很高的可定制性，但同时也对开发者提出了更高的要求，关键点就在于<strong>着色器语言GLSL</strong>的加入。</p> <h2 id="three-js概述"><a href="#three-js概述" class="header-anchor">#</a> Three.js概述</h2> <p>直接使用WebGL编程还是很复杂的，编程者需要知道WebGL的底层细节，并且学习复杂的着色语言来获得WebGL的大部分功能。Three.js是一个对原生WebGL的封装库，同一个效果，用WebGL写需要280行代码，但使用Three.js只需要30行代码，他们的关系就好比Javascript和jQuery。Three.js提供了很多很简单的关于WebGL特性的JavaScript API，所以用户不需要详细地学习着色器语言，就能创作出好看的三维图形。</p> <h2 id="three-js程序结构"><a href="#three-js程序结构" class="header-anchor">#</a> Three.js程序结构</h2> <ul><li>Scene场景</li> <li>Geometry几何体
<ul><li>BoxGeometry立方体</li> <li>SphereGeometry球体</li> <li>CylinderGeometry圆柱</li> <li>自定义几何体（BufferGeometry+BufferAttribute）</li></ul></li> <li>材质
<ul><li>点材质
<ul><li>PointsMaterial</li></ul></li> <li>线材质
<ul><li>LineBasicMaterial</li> <li>LineDashedMaterial</li></ul></li> <li>网格材质
<ul><li>MeshBasicMaterial 不受光照影响</li> <li>MeshLambertMaterial 漫反射</li> <li>MeshPhongMaterial 镜面反射</li> <li>MeshStandardMaterial 金属、玻璃等效果</li></ul></li> <li>精灵材质
<ul><li>SpriteMaterial</li></ul></li> <li>自定义着色器材质
<ul><li>RawShaderMaterial</li> <li>ShaderMaterial</li></ul></li></ul></li> <li>模型
<ul><li>Points点模型</li> <li>Line线模型</li> <li>Mesh网格模型</li> <li>Sprite精灵模型</li></ul></li> <li>Light光源
<ul><li>PointLight点光源</li> <li>AmbientLight环境光</li> <li>DirectionalLight平行光</li> <li>SpotLight聚光灯光源</li></ul></li> <li>Camera相机
<ul><li>OrthographicCamera正投影相机</li> <li>PerspectiveCamera透视投影相机</li></ul></li> <li>Renderer渲染器</li></ul> <h2 id="three-js常用方法"><a href="#three-js常用方法" class="header-anchor">#</a> Three.js常用方法</h2> <ul><li>Scene场景
<ul><li>add(object)</li> <li>children</li> <li>getChildByName(name)</li> <li>remove(object)</li> <li>traverse(func)</li> <li>fog = new THREE.FogExp2(0xffffff,0.015)</li> <li>overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff})</li></ul></li> <li>Geometry几何体
<ul><li>new THREE.Geometry()</li> <li>vertices = [new THREE.Vector3(x,y,z)]</li> <li>faces = [new THREE.Face3(x,y,z)]</li> <li>computeCentroids()</li> <li>mergeVertices()</li> <li>verticesNeedUpdate</li> <li>computeFaceNormals()</li> <li>new THREE.PlaneGeometry(x,y,z)</li> <li>new THREE.BoxGeometry(x,y,z)</li> <li>new THREE.SphereGeometry(x,y,z)</li> <li>clone()</li></ul></li> <li>Mesh网格
<ul><li>position.set(x,y,z) === position = new THREE.Vector3(x,y,z)</li> <li>rotation.set(0.5<em>Math.PI,0,0) === rotation = new THREE.Vector3(0.5</em>Math.PI,0,0)</li> <li>scale.set(x,y,z)</li> <li>translate(n1,n2,n3)</li> <li>visible</li></ul></li> <li>Camera相机
<ul><li>new THREE.OrthographicCamera(left,right,top,near,far)</li> <li>new THREE.PerspectiveCamera(fov,aspect,near,far)</li> <li>lookAt(x,y,z)</li></ul></li> <li>Light光源
<ul><li>new THREE.AmbientLight(0x440000)</li> <li>new THREE.PointLight(0x440000)
<ul><li>color</li> <li>intensity</li> <li>distance</li> <li>position</li> <li>visible</li></ul></li> <li>new THREE.SpotLight(0x440000)
<ul><li>castShadow</li> <li>target</li> <li>angle</li> <li>showCameraNear</li> <li>showCameraFar</li> <li>showCameraFov</li></ul></li> <li>new THREE.DirectionalLight(0x440000)</li></ul></li> <li>Material材料
<ul><li>new THREE.MeshBasicMaterial({color:0x440000})
<ul><li>color</li> <li>wireframe</li> <li>fog</li> <li>visible</li> <li>opacity</li> <li>transparent</li></ul></li> <li>new THREE.MeshLambertMaterial({color: 0x7777ff})
<ul><li>ambient</li> <li>emissive</li></ul></li> <li>new THREE.MeshPhongMaterial({color: 0x7777ff})
<ul><li>specular</li> <li>shininess</li></ul></li> <li>new THREE.ShaderMaterial({fragmentShader,vertexShader})
<ul><li>uniforms</li> <li>attributes</li> <li>vertexShader</li> <li>fragmentShader</li></ul></li></ul></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2/26/2021, 11:29:47 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/dsm/node.html" class="prev">
        服务端开发
      </a></span> <span class="next"><a href="/blog/dsm/lodash.html">
        jQuery / Lodash
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><BackToTop></BackToTop><!----><Live2D></Live2D></div></div>
    <script src="/blog/assets/js/app.7fa07907.js" defer></script><script src="/blog/assets/js/2.b6c629b5.js" defer></script><script src="/blog/assets/js/21.e705be23.js" defer></script><script src="/blog/assets/js/3.589a64d8.js" defer></script>
  </body>
</html>
